.profile_wrapper {
  color: #000;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;

  font-weight: bold;
  font-size: 1.3rem;
}

.contact_wrapper{
  text-align: center;
}
    
.intro {
  /*按钮背景透明，文字不透明*/
  background-color: rgba(192,192,192,0.6);
}

button {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  font-weight: bold;
  /*按钮背景透明，文字不透明*/
  background-color: rgba(192,192,192,0.6);
}

html {
  height: 100%;
}
.u-bg {
  background-color: #dc143c;
  background-image: url("../assets/man3d.png");
}
body {
  background-image: -webkit-radial-gradient(#75FFD4, #0076FF);
  background-image: radial-gradient(#75FFD4, #0076FF);
  font-family: 'Roboto', sans-serif;
  height: 100%;
  overflow: hidden;
  position: relative;
}
a {
  color: black;
  /*text-decoration: none;*/
 /* color: #fff;
  font-size: 30px;
  position: absolute;
  text-decoration: none;
  z-index: 999;*/
}

a:hover {
  color: rgba(255,255,255,0.3);
}
.Github {
  top: 20px;
  right: 50px;
}
.Facebook {
  bottom: 50px;
  left: 50px;
}
.Twitter {
  bottom: 50px;
  left: 100px;
}
.By {
  top: 20px;
  left: 50px;
  font-size: 20px;
}
.Scene {
  bottom: 0;
  height: 100%;
  width: 100%;
  left: 0;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  position: absolute;
  right: 0;
  top: 0px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.base {
  background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 5%, transparent 65%);
  background-image: radial-gradient(rgba(0,0,0,0.25) 5%, transparent 65%);
  height: 320px;
  left: 50%;
  margin-left: -160px;
  margin-top: -160px;
  position: absolute;
  top: 80%;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 320px;
}
.Godo {
  height: 320px;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transform: scale(1) rotate3d(0, 1, 0, 45deg);
          transform: scale(1) rotate3d(0, 1, 0, 45deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 320px;
}
.Godo div {
  position: absolute;
}
.Godo-wrap {
  cursor: move;
  height: 320px;
  left: 50%;
  margin-left: -160px;
  margin-top: -160px;
  position: absolute;
  top: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 320px;
}
.Godo-header {
  height: 80px;
  left: 120px;
  top: 0;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 80px;
}
.Head {
  -webkit-animation: HeadAnimation 1s infinite;
          animation: HeadAnimation 1s infinite;
  height: 80px;
  left: 0px;
  top: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 80px;
}
.Head div {
  width: 80px;
  height: 80px;
}
.Head-top {
  background-position: -80px 0px;
  -webkit-transform: rotateX(90deg) translateZ(40px);
          transform: rotateX(90deg) translateZ(40px);
}
.Head-front {
  background-position: -80px -80px;
  -webkit-transform: rotateY(0deg) translateZ(40px);
          transform: rotateY(0deg) translateZ(40px);
}
.Head-left {
  background-position: 0px -80px;
  -webkit-transform: rotateY(-90deg) translateZ(40px);
          transform: rotateY(-90deg) translateZ(40px);
}
.Head-right {
  background-position: -160px -80px;
  -webkit-transform: rotateY(90deg) translateZ(40px);
          transform: rotateY(90deg) translateZ(40px);
}
.Head-back {
  background-position: -240px -80px;
  -webkit-transform: rotateX(180deg) translateZ(40px) scaleY(-1);
          transform: rotateX(180deg) translateZ(40px) scaleY(-1);
}
.Head-bottom {
  background-position: -160px 0px;
  -webkit-transform: rotateX(-90deg) translateZ(40px);
          transform: rotateX(-90deg) translateZ(40px);
}
.Torso {
  height: 120px;
  left: 120px;
  top: 80px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 80px;
}
.Torso div {
  width: 80px;
  height: 120px;
}
.Torso-top {
  background-position: -200px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(90deg) translateZ(20px);
          transform: rotateX(90deg) translateZ(20px);
}
.Torso-front {
  background-position: -200px -200px;
  -webkit-transform: rotateY(0deg) translateZ(20px);
          transform: rotateY(0deg) translateZ(20px);
}
.Torso-left {
  background-position: -160px -200px;
  width: 40px !important;
  -webkit-transform: rotateY(-90deg) translateZ(20px);
          transform: rotateY(-90deg) translateZ(20px);
}
.Torso-right {
  background-position: -280px -200px;
  width: 40px !important;
  -webkit-transform: rotateY(90deg) translateZ(60px);
          transform: rotateY(90deg) translateZ(60px);
}
.Torso-back {
  background-position: -320px -200px;
  -webkit-transform: rotateY(0deg) translateZ(-20px);
          transform: rotateY(0deg) translateZ(-20px);
}
.Torso-bottom {
  background-position: -280px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(-90deg) translateZ(100px);
          transform: rotateX(-90deg) translateZ(100px);
}
.RightLeg,
.LeftLeg,
.LeftArm,
.RightArm {
  height: 120px;
  top: 80px;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 40px;
}
.RightLeg div,
.LeftLeg div,
.LeftArm div,
.RightArm div {
  width: 40px;
  height: 120px;
}
.LeftArm {
  left: 80px;
  -webkit-animation: Legs 1s infinite;
          animation: Legs 1s infinite;
}
.LeftArm-top {
  background-position: -440px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(90deg) translateZ(20px);
          transform: rotateX(90deg) translateZ(20px);
}
.LeftArm-bottom {
  background-position: -480px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(-90deg) translateZ(100px) scaleX(-1);
          transform: rotateX(-90deg) translateZ(100px) scaleX(-1);
}
.LeftArm-right {
  background-position: -480px -200px;
  -webkit-transform: rotateY(90deg) translateZ(20px);
          transform: rotateY(90deg) translateZ(20px);
}
.LeftArm-back {
  background-position: -520px -200px;
  -webkit-transform: rotateY(0deg) translateZ(-20px) scaleX(-1);
          transform: rotateY(0deg) translateZ(-20px) scaleX(-1);
}
.LeftArm-left {
  background-position: -400px -200px;
  -webkit-transform: rotateY(-90deg) translateZ(20px);
          transform: rotateY(-90deg) translateZ(20px);
}
.LeftArm-front {
  background-position: -440px -200px;
  -webkit-transform: rotateY(0deg) translateZ(20px);
          transform: rotateY(0deg) translateZ(20px);
}
.RightArm {
  left: 200px;
  -webkit-animation: LegsAlt 1s infinite;
          animation: LegsAlt 1s infinite;
}
.RightArm-top {
  background-position: -440px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(90deg) translateZ(20px) scaleX(-1);
          transform: rotateX(90deg) translateZ(20px) scaleX(-1);
}
.RightArm-bottom {
  background-position: -480px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(-90deg) translateZ(100px);
          transform: rotateX(-90deg) translateZ(100px);
}
.RightArm-back {
  background-position: -520px -200px;
  -webkit-transform: rotateY(0deg) translateZ(-20px);
          transform: rotateY(0deg) translateZ(-20px);
}
.RightArm-right {
  background-position: -400px -200px;
  -webkit-transform: rotateY(90deg) translateZ(20px) scaleX(-1);
          transform: rotateY(90deg) translateZ(20px) scaleX(-1);
}
.RightArm-left {
  background-position: -480px -200px;
  -webkit-transform: rotateY(-90deg) translateZ(20px) scaleX(-1);
          transform: rotateY(-90deg) translateZ(20px) scaleX(-1);
}
.RightArm-front {
  background-position: -440px -200px;
  -webkit-transform: rotateY(0deg) translateZ(20px) scaleX(-1);
          transform: rotateY(0deg) translateZ(20px) scaleX(-1);
}
.Legs {
  width: 80px;
  height: 120px;
  top: 200px;
  left: 120px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.LeftLeg {
  -webkit-animation: LegsAlt 1s infinite;
          animation: LegsAlt 1s infinite;
  left: 0;
  top: 0;
}
.LeftLeg-bottom {
  background-position: -80px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(-90deg) translateZ(100px);
          transform: rotateX(-90deg) translateZ(100px);
}
.LeftLeg-top {
  background-position: -40px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(90deg) translateZ(20px);
          transform: rotateX(90deg) translateZ(20px);
}
.LeftLeg-back {
  background-position: -120px -200px;
  -webkit-transform: rotateY(0deg) translateZ(-20px) scaleX(-1);
          transform: rotateY(0deg) translateZ(-20px) scaleX(-1);
}
.LeftLeg-right {
  background-position: -80px -200px;
  -webkit-transform: rotateY(90deg) translateZ(20px);
          transform: rotateY(90deg) translateZ(20px);
}
.LeftLeg-left {
  background-position: 0px -200px;
  -webkit-transform: rotateY(-90deg) translateZ(20px);
          transform: rotateY(-90deg) translateZ(20px);
}
.LeftLeg-front {
  background-position: -40px -200px;
  -webkit-transform: rotateY(0deg) translateZ(20px);
          transform: rotateY(0deg) translateZ(20px);
}
.RightLeg {
  -webkit-animation: Legs 1s infinite;
          animation: Legs 1s infinite;
  left: 40px;
  top: 0;
}
.RightLeg-bottom {
  background-position: -80px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(-90deg) translateZ(100px);
          transform: rotateX(-90deg) translateZ(100px);
}
.RightLeg-top {
  background-position: -40px -160px;
  height: 40px !important;
  -webkit-transform: rotateX(90deg) translateZ(20px);
          transform: rotateX(90deg) translateZ(20px);
}
.RightLeg-back {
  background-position: -120px -200px;
  -webkit-transform: rotateY(0deg) translateZ(-20px);
          transform: rotateY(0deg) translateZ(-20px);
}
.RightLeg-right {
  background-position: 0px -200px;
  -webkit-transform: rotateY(90deg) translateZ(20px) scaleX(-1);
          transform: rotateY(90deg) translateZ(20px) scaleX(-1);
}
.RightLeg-left {
  background-position: -80px -200px;
  -webkit-transform: rotateY(-90deg) translateZ(20px) scaleX(-1);
          transform: rotateY(-90deg) translateZ(20px) scaleX(-1);
}
.RightLeg-front {
  background-position: -40px -200px;
  -webkit-transform: rotateY(0deg) translateZ(20px);
          transform: rotateY(0deg) translateZ(20px);
}
@-webkit-keyframes HeadAnimation {
  0% {
    -webkit-transform: rotateY(2deg);
            transform: rotateY(2deg);
  }
  50% {
    -webkit-transform: rotateY(-2deg);
            transform: rotateY(-2deg);
  }
  100% {
    -webkit-transform: rotateY(2deg);
            transform: rotateY(2deg);
  }
}
@keyframes HeadAnimation {
  0% {
    -webkit-transform: rotateY(2deg);
            transform: rotateY(2deg);
  }
  50% {
    -webkit-transform: rotateY(-2deg);
            transform: rotateY(-2deg);
  }
  100% {
    -webkit-transform: rotateY(2deg);
            transform: rotateY(2deg);
  }
}
@-webkit-keyframes Legs {
  0% {
    -webkit-transform: rotateX(-30deg);
            transform: rotateX(-30deg);
  }
  50% {
    -webkit-transform: rotateX(30deg);
            transform: rotateX(30deg);
  }
  100% {
    -webkit-transform: rotateX(-30deg);
            transform: rotateX(-30deg);
  }
}
@keyframes Legs {
  0% {
    -webkit-transform: rotateX(-30deg);
            transform: rotateX(-30deg);
  }
  50% {
    -webkit-transform: rotateX(30deg);
            transform: rotateX(30deg);
  }
  100% {
    -webkit-transform: rotateX(-30deg);
            transform: rotateX(-30deg);
  }
}
@-webkit-keyframes LegsAlt {
  0% {
    -webkit-transform: rotateX(30deg);
            transform: rotateX(30deg);
  }
  50% {
    -webkit-transform: rotateX(-30deg);
            transform: rotateX(-30deg);
  }
  100% {
    -webkit-transform: rotateX(30deg);
            transform: rotateX(30deg);
  }
}
@keyframes LegsAlt {
  0% {
    -webkit-transform: rotateX(30deg);
            transform: rotateX(30deg);
  }
  50% {
    -webkit-transform: rotateX(-30deg);
            transform: rotateX(-30deg);
  }
  100% {
    -webkit-transform: rotateX(30deg);
            transform: rotateX(30deg);
  }
}
